<template>
  <div
    class="super_brand_coupons_warp"
    :style="{ backgroundColor: couponBgColor }"
    :class="{ between: couponArr.length === 2 || couponArr.length === 3 }"
  >
    <!-- 一张券 -->
    <template v-if="couponArr.length === 1">
      <div v-for="(item, index) in couponArr" :key="index" class="coupon_one">
        <div class="coupon_left"><span>¥</span>{{ item.amount }}</div>
        <div class="coupon_right">
          <div>
            <p class="limit_amount more_text1">
              满{{ item.thresholdAmount }}可用
            </p>
            <p class="tip more_text1">{{ item.desc }}</p>
          </div>
          <div id="btn" class="btn">
            <p v-if="item.status === 1" class="robbery">
              <span>{{ item.startT }} 开抢</span>
              <span v-if="item.date" class="date">{{ item.date }}</span>
            </p>
            <p
              v-if="item.status === 2 || item.status === 4"
              class="start"
              @click="grabbingCoupon(item, index)"
            >
              立即抢券
            </p>
            <p v-if="item.status === 3" class="finished">已领取</p>
          </div>
        </div>
        <img
          v-if="item.status === 4"
          src="@/assets/superBrand/mask_bg_one.png"
          class="mask"
          alt=""
        />
      </div>
    </template>
    <!-- 两张券 -->
    <template v-if="couponArr.length === 2">
      <div v-for="(item, index) in couponArr" :key="index" class="coupon_two">
        <div class="coupon_top">
          <p class="money"><span>¥</span>{{ item.amount }}</p>
          <div class="rule">
            <p class="limit_amount more_text1">
              满{{ item.thresholdAmount }}可用
            </p>
            <p class="more_text1 tip">{{ item.desc }}</p>
          </div>
        </div>
        <div id="btn" class="btn">
          <p v-if="item.status === 1" class="robbery">
            <span>{{ item.startT }} 开抢</span>
            <span v-if="item.date" class="date">{{ item.date }}</span>
          </p>
          <p
            v-if="item.status === 2 || item.status === 4"
            class="start"
            @click="grabbingCoupon(item, index)"
          >
            立即抢券
          </p>
          <p v-if="item.status === 3" class="finished">已领取</p>
        </div>
        <img
          v-if="item.status == 4"
          src="@/assets/superBrand/coupon_bg_mask.png"
          class="mask"
          alt=""
        />
      </div>
    </template>
    <!-- 三张券 -->
    <template v-if="couponArr.length == 3">
      <div v-for="(item, index) in couponArr" :key="index" class="coupon_three">
        <div class="coupon_top">
          <p class="money"><span>¥</span>{{ item.amount }}</p>
          <p class="more_text1">满{{ item.thresholdAmount }}可用</p>
          <p class="more_text1 tip">{{ item.desc }}</p>
        </div>
        <div id="btn" class="btn">
          <p v-if="item.status == 1" class="robbery">
            <span>{{ item.startT }} 开抢</span>
            <span v-if="item.date" class="date">{{ item.date }}</span>
          </p>
          <p
            v-if="item.status == 2 || item.status == 4"
            class="start"
            @click="grabbingCoupon(item, index)"
          >
            立即抢券
          </p>
          <p v-if="item.status == 3" class="finished">已领取</p>
        </div>
        <img
          v-if="item.status == 4"
          src="@/assets/superBrand/coupon_mask_three.png"
          class="mask"
          alt=""
        />
      </div>
    </template>
    <!-- 多张券 -->
    <template v-if="couponArr.length > 3">
      <div
        v-for="(item, index) in couponArr"
        :key="index"
        class="coupon_three coupon_four"
      >
        <div class="coupon_top">
          <p class="money"><span>¥</span>{{ item.amount }}</p>
          <p class="more_text1">满{{ item.thresholdAmount }}可用</p>
          <p class="more_text1 tip">{{ item.desc }}</p>
        </div>
        <div id="btn" class="btn">
          <p v-if="item.status == 1" class="robbery">
            <span>{{ item.startT }} 开抢</span>
            <span v-if="item.date" class="date">{{ item.date }}</span>
          </p>
          <p
            v-if="item.status == 2 || item.status == 4"
            class="start"
            @click="grabbingCoupon(item, index)"
          >
            立即抢券
          </p>
          <p v-if="item.status == 3" class="finished">已领取</p>
        </div>
        <img
          v-if="item.status == 4"
          src="@/assets/superBrand/coupon_mask_four.png"
          class="mask"
          alt=""
        />
      </div>
    </template>
  </div>
</template>
<script>
export default {
  props: {
    couponBgColor: {
      type: String,
      default: '#C8083A'
    },
    couponArr: {
      type: Array,
      default: () => []
    },
    couponsIndex: {
      type: Number,
      default: 0
    },
    hotSaleName: {
      type: String,
      default: ''
    },
    hotSaleId: {
      type: String,
      default: ''
    },
    resId: {
      type: [Number, String],
      default: ''
    }
  },
  data() {
    return {
      timer: null
    };
  },
  mounted() {
    this.couponArr.forEach(item => {
      item.thresholdAmount = (item.thresholdAmount / 100).toFixed(0);
      item.amount = (item.amount / 100).toFixed(0);
      let tArr = item.startTime.split(' ')[1].split(':');
      item.startT = `${tArr[0]}:${tArr[1]}`;
      if (!item.today && item.status == 1) {
        let dateArr = item.startTime.split(' ')[0].split('-');
        item.date = `${dateArr[0]}年${dateArr[1]}月${dateArr[2]}日`;
      }
    });
    this.countDown();
  },
  beforeDestroy() {
    clearTimeout(this.timer);
  },

  methods: {
    countDown() {
      if (this.couponArr.length == 0) return;
      let timeList = [];
      this.couponArr.forEach(item => {
        // 优惠券的状态为未领取
        if (item.status == 1) {
          item.distanceStartTime -= 1000;
          if (item.distanceStartTime <= 0) {
            item.status = 2;
          } else {
            timeList.push(item.distanceStartTime);
          }
        }
      });
      let haveStart = timeList.length && timeList.some(item => item > 0);
      if (haveStart) {
        this.timer = setTimeout(() => {
          this.countDown();
        }, 1000);
      }
    },
    // 抢券
    grabbingCoupon(data) {
      this.$emit('grabbingCoupon', data, this.couponsIndex);
    }
  }
};
</script>
<style lang="scss" scoped>
.super_brand_coupons_warp {
  box-sizing: border-box;
  padding: 0 0 5px 10px;
  display: flex;
  overflow: auto;
  &::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
  .coupon_one {
    width: 355px;
    height: 80px;
    background-image: url('../../../assets/superBrand/coupon_bg_one.png');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center center;
    display: flex;
    position: relative;

    .mask {
      position: absolute;
      left: 0;
      top: 0;
      width: 355px;
      height: 80px;
    }
    .coupon_left {
      width: 100px;
      height: 100%;
      font-size: 40px;
      font-family: DINAlternate-Bold, DINAlternate;
      font-weight: bold;
      color: rgba(255, 16, 16, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        font-size: 20px;
        font-family: DINAlternate-Bold, DINAlternate;
        font-weight: bold;
        color: rgba(255, 16, 16, 1);
      }
    }
    .coupon_right {
      width: 255px;
      padding: 0 24px 0 13px;
      align-items: center;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      .limit_amount {
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 16, 16, 1);
      }
      .tip {
        font-size: 10px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 16, 16, 1);
        margin-top: 6px;
        // line-height: 13px;
      }
      .btn {
        p {
          width: 86px;
          height: 24px;
          text-align: center;
          border-radius: 12px;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(255, 16, 16, 1);
        }
      }
    }
  }
  .coupon_two {
    width: 174px;
    height: 83px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background-image: url('../../../assets/superBrand/coupon_bg_two.png');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center center;
    padding: 10px 16px 8px 16px;
    box-sizing: border-box;
    margin-right: 7px;
    position: relative;
    .mask {
      position: absolute;
      width: 174px;
      height: 83px;
      object-fit: cover;
      left: 0;
      top: 0;
    }
    .coupon_top {
      display: flex;
      align-items: center;
      .money {
        font-size: 32px;
        font-family: DINAlternate-Bold, DINAlternate;
        font-weight: bold;
        color: #ff1010;
        span {
          font-size: 14px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: rgba(255, 16, 16, 1);
        }
      }
      .rule {
        margin-left: 26px;
        color: #ff1010;
        p {
          font-size: 8px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
        }
        .limit_amount {
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          margin-top: 4px;
        }
      }
    }
    .btn {
      width: 142px;
    }
  }
  .coupon_three {
    width: 114px;
    height: 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background-image: url('../../../assets/superBrand/coupon_bg_three.png');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center center;
    box-sizing: border-box;
    padding: 10px 5px 4px 5px;
    position: relative;
    .mask {
      position: absolute;
      width: 114px;
      height: 96px;
      object-fit: cover;
      left: 0;
      top: 0;
    }
    .coupon_top {
      display: flex;
      flex-direction: column;
      align-items: center;
      p {
        font-size: 10px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ff1010;
      }
      .money {
        font-size: 30px;
        font-family: DINAlternate-Bold, DINAlternate;
        font-weight: bold;
        line-height: 24px;
        span {
          font-size: 20px;
        }
      }
    }
    .btn {
      width: 86px;
    }
  }
  .coupon_four {
    background-image: url('../../../assets/superBrand/coupon_bg_four.png');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center center;
    width: 100px;
    height: 96px;
    margin-right: 5px;
    position: relative;
    padding: 12px 5px 4px 5px;
    .mask {
      position: absolute;
      width: 100px;
      height: 96px;
      object-fit: cover;
      left: 0;
      top: 0;
    }
    .btn {
      width: 86px;
    }
  }
  #btn {
    p {
      height: 24px;
      text-align: center;
      border-radius: 12px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(255, 16, 16, 1);
    }
    .robbery {
      border: 1px solid #ff2610;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .date {
        font-size: 8px;
      }
    }
    .start {
      background-color: #ff1010;
      color: #ffffff;
      line-height: 24px;
    }
    .finished {
      background-color: #f9cd90;
      color: #ffffff;
      line-height: 24px;
    }
  }
}
.between {
  justify-content: space-between;
  padding-right: 10px;
}
.tip {
  // line-height: 13px;
  // overflow: hidden;
  height: 13px;
}
.more_text1 {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
}
</style>
